<template>
  <div class="case">
    <na-table :datas.sync="tableData" :searchObj.sync="search" @updateDatas="getScrapList">
    </na-table>
    <!--  查看退货出库弹框   -->
    <el-dialog title="查看退货出库" :visible.sync="isSeevisible" :close-on-click-modal="false"
      custom-class="bodyNoPadDialog bigDialog" width="85%">
      <div class="dialogDody">
        <div class="subTip">
          <span class="mr15"><span class="mr5">出库单号：</span>{{ outForm.outStockBillNo || '系统自动生成' }}</span>
          <span class="mr15"><span
              class="mr5">创建日期：</span>{{ outForm.createTime || dayjs().format('YYYY-MM-DD') }}</span>
          <span><span class="mr5">创建人员：</span>{{ outForm.createPersonName}}</span>
        </div>
        <div class="addWuliaoBox">
          <el-form ref="outForm" :model="outForm" label-width="95px" disabled label-position="left"
            class="dialogForm dialogInlineForm">
            <el-row>
              <el-col :span="8">
                <el-form-item label="出库类型">
                  <el-input v-model="outForm.outStockTypeName" placeholder="请输入退货备注" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="关联单据">
                  <el-input v-model="outForm.associationBillNo" placeholder="关联单据" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="申请人员">
                  <el-input v-model="outForm.receivePersonName" placeholder="请输入内容" size="mini" />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="供应商">
                  <el-input v-model="outForm.supplierName" placeholder="请输入退货备注" size="mini" disabled />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="发票号码">
                  <el-input v-model="outForm.invoiceNumber" placeholder="关联单据" size="mini" disabled />
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="24">
                <el-form-item label="退货备注" class="inlineText" prop="outStockBillRemark">
                  <el-input v-model="outForm.outStockBillRemark" type="textarea" :rows="1" placeholder="请输入退货备注"
                    size="mini" clearable />
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <div class="tableBox">
            <div class="tt flex flex_between">
              <span class="fw">领料明细</span>
            </div>
            <el-table v-loading="infoLoading" :data="outForm.detailList" border style="width: 100%">
              <el-table-column label="物料编号" prop="stockGoodsCode" show-overflow-tooltip min-width="110" />
              <el-table-column label="物料类型" prop="categoryName" min-width="90" />
              <el-table-column label="供应商" prop="supplierName" show-overflow-tooltip min-width="110" />
              <el-table-column label="物料名称" prop="goodsName" show-overflow-tooltip min-width="110" />
              <el-table-column label="规格型号" prop="stockGoodsName" min-width="90" />
              <el-table-column label="库存数量" show-overflow-tooltip min-width="90" prop="stockQuantity" />
              <el-table-column label="退货数量" show-overflow-tooltip min-width="90" prop="outStockQuantity" />
              <el-table-column label="物料单位" prop="goodsUnitName" min-width="110" />
              <el-table-column label="出库库位" prop="warehouseAreaName" min-width="110">
                <template slot-scope="scope">
                  {{ scope.row.warehouseAreaName + scope.row.areaShelfName || '--' }}
                </template>
              </el-table-column>
              <el-table-column label="备注" show-overflow-tooltip min-width="150" prop="outStockRemark" />
            </el-table>
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" @click="isSeevisible=false">取 消</el-button>
        <!-- 确定       -->
        <el-button type="primary" size="mini" @click="isSeevisible=false">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import {
    arraySort
  } from '@/utils'
  import naTable from "@/components/naTable";
  import {
    mapGetters
  } from 'vuex'
  export default {
    name: '',
    components: {
      naTable
    },
    computed: {
      ...mapGetters([
        'name',
        'userInfo'
      ])
    },
    data() {
      return {
        isSeevisible: false, // 查看弹框是否打开
        infoLoading: false,
        searchLoading: false, // 列表加载效果
        search: {
          QueryDataBaseFiled: '',
          pageIndex: 1,
          pageSize: 30,
          outStockType: '', // 出库类型
          likeWords: ''
        },
        total: 0,
        dataLists: [],
        tableHead: [], // 表头
        tableHeight: null,
        outForm: {
          detailList: []
        },

        tableData: {
          headId: 'head', //表头列显隐组件所需ID-避免多个页面id重复问题
          tableId: 'outStockID', //表格列表key,也就是一条数据的唯一标识
          senior: false, //高级搜索是否显示
          disableWord: '', //是否禁用显示的字段
          disableStatus: '', //判断未禁用的状态值
          addTitle: '', //新建按钮名称-为''则不显示，为undefine则为新建
          addPermission: '', //新建按钮权限
          addIcon: '', //新建按钮icon
          voidWord: '', //需要查询作废的字段
          statusList: [], //状态筛选条件列表
          statusWord: '', //状态筛选的字段
          refresh: true, //刷新按钮
          //表格按钮
          operationBtn: [{
            title: '查看', //按钮名称
            methodsName: 'seeInfo', //按钮绑定方法的字段
          }],
          //表格内容
          tbody: [],
          //表格表头
          thead: [],
        },
      }
    },
    created() {
      // 退货出库表头
      this.getTableHead()
    },
    mounted() {},
    methods: {
      // 查看领料出库
      seeInfo(data) {
        this.isSeevisible = true
        this.ops = 'see'
        this.getInfo(data.outStockID)
      },
      // 出库单详情
      getInfo(id) {
        const params = {
          queryBy: 1,
          queryValue: id
        }
        this.infoLoading = true
        this.$api.warehouse.GetSingleTHOutStockBill(params).then(res => {
          const arr = [...res.detailList]
          arr.forEach(item => {
            const newArr = []
            newArr.push(item.warehouseAreaCode, item.areaShelfCode)
            item.stockArea = newArr
          })
          this.outForm = res
          this.infoLoading = false
        }).catch(() => {
          this.infoLoading = false
        })
      },
      // 退货出库表头
      getTableHead() {
        const parmas = {
          tableCode: this.$config.tHOutStockBillList
        }
        this.$api.common.getAllTableHead(parmas).then(res => {
          res.sort(arraySort('columnSort'))
          this.tableData.thead = res;
          // 退货出库列表
          this.getScrapList()
        })
      },
      // 退货出库列表
      getScrapList() {
        const params = this.search
        this.searchLoading = true
        this.$api.warehouse.GetMatchPageTHOutStockBills(params).then(res => {
          res.list.forEach((item)=>{
            if(item.outStockState == 0){
              item.outStockState = '待确认'
            }else if(item.outStockState == 1){
              item.outStockState = '已确认'
            }else{
              item.outStockState = '已拒绝'
            }
          })
          this.tableData.tbody = res.list;
          this.search.total = res.totalCount; 
          this.searchLoading = false
        }).catch(() => {
          this.searchLoading = false
        })
      },
    }
  }

</script>
<style lang="scss" scoped>
  .spot {
    width: 6px;
    height: 6px;
    display: inline-block;
    border-radius: 100%;
  }

  .subTip {
    border-bottom: 1px #e6e6e6 solid;
    background: #f5f6f9;
    padding: 8px 16px;
  }

  .addWuliaoBox {
    padding: 10px 16px;

    .tableBox {
      margin-top: 16px;
      border: 1px solid #e6e6e6;
      border-bottom: none;
      border-radius: 8px 8px 0 0;
      overflow: hidden;

      .tt {
        height: 38px;
        line-height: 38px;
        padding-left: 16px;
        background: #f7f8fa;
        border-radius: 8px 8px 0 0;
      }
    }
  }

</style>
